<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>礼品仓库</el-breadcrumb-item>
      <el-breadcrumb-item>礼品统计</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="16" style="text-align: center">
          <!-- 日期筛选 -->
          <el-date-picker
            v-model="querInfo.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-select
            v-model="querInfo.isme"
            placeholder="我的统计"
            style="width: 120px"
          >
            <el-option v-for="item in agg" :value="item"></el-option>
          </el-select>
          <el-button icon="el-icon-search" @click="getBtn"></el-button>
        </el-col>
      </el-row>
      <el-table stripe show-summary :data="tableData">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column
          prop="_id.username"
          label="姓名"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="_id.giftName"
          label="礼品名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="录入数量"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="getNum"
          label="出库数量"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="use"
          label="使用数量"
          width="100"
        ></el-table-column>
        <el-table-column label="剩余数量" width="100">
          <template v-slot="scope">
            <span>{{ scope.row.num - scope.row.getNum - scope.row.use }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { Notification } from 'element-ui'
export default {
  data() {
    return {
      user: {},
      // 商品表格数据
      tableData: [],
      querInfo: {
        isme: '我的统计',
      },
      agg: ['我的统计', '下级统计'],
    }
  },
  created() {
    this.user = JSON.parse(window.localStorage.getItem('user'))
    this.gettotal()
  },
  methods: {
    async gettotal() {
      const { data: res } = await this.$http.post('/hx/mygift', this.querInfo)
      if (res.meta.status !== 200) {
        Notification.error({
          title: '提示',
          message: res.meta.msg,
          position: 'top-left',
        })
      }
      this.tableData = res.data
    },
    getBtn() {
      if (this.querInfo.isme == '我的统计') {
        this.gettotal()
      } else if (this.querInfo.isme == '下级统计') {
        this.othertotal()
      }
    },
    async othertotal() {
      const { data: res } = await this.$http.post(
        '/hx/otherstatistical',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        Notification.error({
          title: '提示',
          message: res.meta.msg,
          position: 'top-left',
        })
      }
      this.tableData = res.data
    },
  },
}
</script>

<style lang="less" scoped>
</style>